
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,
  Dimensions,TouchableOpacity,TextInput,KeyboardAvoidingView,ScrollView
} from 'react-native';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
import Picker from 'react-native-picker';
import {createDateData,getCurrentDate} from '../../common/common'
import DeviceStorage from '../../common/DeviceStorage'
const dismissKeyboard = require('dismissKeyboard');
var {height, width} = Dimensions.get('window');
export default class ApplyAudit extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='水电站停水审核' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      loading:true,
      applyResult:'请选择申请结果',
      content:'',
    
    })
    //console.log(this.props)
  }
  componentWillMount(){
    //this.fetchData();
    DeviceStorage.get('USER_NAME').then((USER_NAME)=>{
      if(USER_NAME){
        this.setState({
          USER_NAME:USER_NAME
        })
      } 
    })
    DeviceStorage.get('USER_ID').then((USER_ID)=>{
      if(USER_ID){
        this.setState({
          USER_ID:USER_ID
        })
      } 
    })
  }
  componentDidMount(){
    
  }
  //显示申请结果
  _showApplyResultPicker(){
    dismissKeyboard()//收起键盘
    Picker.init({
      pickerTitleText:'申请结果选择',
      pickerCancelBtnText:'取消',
      pickerConfirmBtnText:'确定',
      selectedValue:[this.state.applyResult],
      pickerBg:[255,255,255,1],
      pickerData: ['通过','不通过'],
      pickerFontColor: [33, 33 ,33, 1],
      onPickerConfirm: (pickedValue, pickedIndex) => {
          console.log('选择的意见是:', pickedValue, pickedIndex);
          this.setState({
            applyResult:pickedValue
          })
      },
      onPickerCancel: (pickedValue, pickedIndex) => {
          //console.log('date', pickedValue, pickedIndex);
      },
      onPickerSelect: (pickedValue, pickedIndex) => {
          //console.log('date', pickedValue, pickedIndex);
      }
    });
    Picker.show();
  }
  _auditContent(val){
    this.setState({
      content:val
    })
  }
  _submit(){
    dismissKeyboard()//收起键盘
    Picker.hide();
    //console.log('refs',this.refs)
    let applyResult = this.state.applyResult
    applyResult = applyResult=='通过'?'1':applyResult
    applyResult = applyResult=='不通过'?'2':applyResult
    let content = this.state.content
 
    if(applyResult == '请选择申请结果'){
      this.refs.toast.show('请选择申请结果')
      return
    } else if(!content){
      this.refs.toast.show('请填写审核意见')
      return
    } else {
      //this.refs.toast.show('ok',2500)


      fetch(BASEURL+'saveAuditApply?auditor_id='+this.state.USER_ID+
        '&auditor_name='+this.state.USER_NAME+
        '&audit_content='+content+'&status='+applyResult+
        '&applyId='+this.props.navigation.getParam('applyId'))
      .then(res=>res.json())
      .then(response=>{
        console.log('audit res=',response)
        if(response.falg){
          this.refs.toast.show('审核成功',2500)
          setTimeout(()=>{
            this.props.navigation.push('applyList')
          },2500)
        } else {
          this.refs.toast.show('审核失败')
        }
      })
    }
  }
  _saveToServer(){

  }
  _onFocus(){
    // this.setState({
    //   onFocus:true
    // })
  }
  render(){
    return(
      <View style={styles.container}>
        <View  style={{flex:1}}>
          <View style={{backgroundColor:'white'}}>
            <View style={{height:10,backgroundColor:'#f0f0f0'}}></View>
            <Select title='申请结果' subTitle={this.state.applyResult} press={()=>{this._showApplyResultPicker()}}/>
            
            <View style={styles.textAreaView}>
              <Text style={{fontSize:14,paddingTop:10,paddingBottom:10}}>审核意见</Text>
              <KeyboardAvoidingView  behavior="padding" enabled>
              <TextInput 
                  placeholder='请填写审核意见'
                  style={{fontSize:14,height:100,padding:0,paddingTop:5}}
                  textAlignVertical='top'
                  underlineColorAndroid="transparent"
                  multiline={true}
                  onChangeText={(val)=>{this._auditContent(val)}}
                  placeholderTextColor='#A9A9A9'
                />
              </KeyboardAvoidingView>
            </View>
          </View>
          <TouchableOpacity  style={styles.btn} activeOpacity={0.6} onPress={()=>{this._submit()}}>
            <Text style={{color:'white',fontSize:16}}>确定</Text>
          </TouchableOpacity>
        </View>
        <Toast ref="toast" position='bottom' positionValue={200} />
      </View>
    )
  }
}
class Select extends Component {
  render(){
    return(
      <View style={[styles.row,this.props.style]}>
        <Text style={styles.flex1}>{this.props.title}</Text>
        <TouchableOpacity style={styles.flex1} activeOpacity={0.5} onPress={this.props.press}>
          <Text style={styles.rightText}>{this.props.subTitle}</Text>
        </TouchableOpacity>
        {this.props.rightImg?
          <Image style={styles.imgStyle} source={require('../../images/arrow.png')}/>
        :
          <View style={styles.imgStyle}></View>
        }
      </View>
    )
  }
}
const styles = StyleSheet.create({
  btn:{
    marginTop:20,
    marginBottom:10,
    marginLeft:15,
    marginRight:15,
    backgroundColor:'#5fbcf9',
    padding:10,
    justifyContent:'center',
    alignItems:'center',
    borderRadius:5,
  },
  textAreaView:{
    marginLeft:20,
    marginRight:20,
  },
  inputRow:{
    flexDirection:'row',
    alignItems:'center',
    marginLeft:20,
    marginRight:10,
    borderBottomColor:'#ccc',
    borderBottomWidth:StyleSheet.hairlineWidth,
  },
  searchInput:{
    textAlign:'right',
    marginLeft:10,
    marginRight:14,
    padding:0,
    flex:1,
    height: 36, 
    color:'#A9A9A9',
  },
  imgStyle:{
    width:9,
    height:15,
    marginLeft:5,
  },
  rightText:{
    color:'#A9A9A9',
    fontSize:14,
    textAlign:'right',
    fontWeight:'100',
  },
  flex1:{
    flex:1,
    //borderWidth:1,
    //borderColor:'red',
    fontSize:14,
  },
  row:{
    flexDirection:'row',
    alignItems:'center',
    marginLeft:20,
    marginRight:10,
    paddingTop:10,
    paddingBottom:10,
    borderBottomColor:'#ccc',
    borderBottomWidth:StyleSheet.hairlineWidth,
  },
  container:{
    // position:'absolute',
    // top:0,
    // left:0,
    // right:0,
    // bottom:0,
    flex:1,
    height:'100%',
    backgroundColor:'#f0f0f0',

  }
})